<!--
 * @Author: 岸舟
 * @Date: 2020-09-22 15:06:01
 * @LastEditors: 岸舟
 * @LastEditTime: 2020-09-23 18:51:56
 * @Description: 
-->
<template>
<div class="sector">
    <el-row :gutter="20" style="margin-bottom:10px">
        <el-col :span="6">
            <el-input type="text" placeholder="请输入新分类名" v-model="newSort" maxlength="10" show-word-limit size="small"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button type="sucess" @click="add" size="small">新增分类</el-button>
        </el-col>
    </el-row>
    <el-table :data="insureSorts.data" style="width: 100%">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column prop="sortName" label="保险分类名称" width="180">
        </el-table-column>
        <el-table-column prop="includeProductList.length" label="保险产品数量" width="300">
        </el-table-column>
        <el-table-column align="right" label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(insureSorts.data[scope.$index]._id)">重命名</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(insureSorts.data[scope.$index])">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</template>

<script>
import {
    createNamespacedHelpers
} from "vuex"

const {
    mapState,
    mapMutations,
    mapActions
} = createNamespacedHelpers("insureSort")

export default {
    data() {
        return {
            newSort: ""
        }
    },
    methods: {
        ...mapActions(["getSorts", "modSort", "delSort", "addSort"]),
        indexMethod(index) {
            return index + 1;
        },
        handleEdit(_id) {
            this.$prompt('请输入名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({
                value
            }) => {
                this.$message({
                    type: 'success',
                    message: '新保险分类名称是: ' + value
                });
                this.modSort({
                    _id,
                    sortName: value
                })
            }).catch((err) => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        handleDelete(val) {
            if (val.includeProductList.length) {
                this.open()
            } else {
                this.delSort(val.sortName)
                this.open2()
            }
        },
        open() {
            this.$message.error('删除失败，此保险分类下尚有保险产品');
        },
        open2() {
            this.$message({
                message: '删除成功',
                type: 'success'
            });
        },
        async add() {
            await this.addSort(this.newSort)
            if (this.backendVal.status == "1") {
                this.$message({
                    message: '新增成功',
                    type: 'success'
                })
            } else {
                this.$message.error(this.backendVal.type + "," + this.backendVal.msg);
            }
        }
    },
    computed: {
        ...mapState(["insureSorts", "backendVal"])
    },
    mounted() {
        this.getSorts()
    },
}
</script>

<style lang="scss">
@import "../../assets/scss/System/insureSort.scss"
</style>
